<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="上传模板文件"
        width="660px"
    >
        <div class="upload-file-page">
            <div class="upload-form">
                <div class="upload-form-item">
                    <div class="upload-title">文件名称：</div>
                    <div class="upload-content">{{ templateName }}</div>
                </div>
                <div class="upload-form-item" v-if="!fileCode">
                    <div class="upload-title">模板编号：</div>
                    <div class="upload-content">
                        <el-input v-model="fileCode" style="width: 500px;" maxlength="18"></el-input>
                    </div>
                </div>
                <div class="upload-form-item">
                    <div class="upload-title">模板文件：</div>
                    <div class="upload-content">
                        <el-upload style="float: left;" ref="upload" action="" :show-file-list="false" :auto-upload="false"
                                   :accept="suffixes" :on-change="handleChange" v-if="dataList.length==0">
                            <el-button type="primary">选择文件</el-button>
                        </el-upload>
                        <div v-for="item in dataList" class="show_file_div">
                            <div class="show_file_name" @click="$common.downloadFile(item.id)">{{ item.fileName }}（{{ item.fileSize }}）</div>
                            <el-button class="el-icon-error" type="text" @click="deleteFile(item)"></el-button>
                        </div>
                    </div>
                </div>

                <div class="upload-form-item">
                    <div class="upload-title"></div>
                    <div class="upload-content-message">
                        只能上传{{ suffixes }}文件，且不超过{{ fileSize }}
                    </div>
                </div>
            </div>
            <div class="edit_button">
                <el-button type="primary" @click="submitFile" v-loading.fullscreen.lock="loading">保存</el-button>
                <el-button type="primary" @click="resetForm">关闭</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "uploadTemplate",
    props: {
        visible: Boolean,
        fileCode: {
            type: String,
            default: "",
        },
        templateName: {
            type: String,
            default: "导入模块文件",
        },
        suffixes: String,
        fileSize: {
            type: String,
            default: "500M",
        }
    },
    data() {
        return {
            height: '500px',
            loading: false,

            dataList: [],
        }
    },
    methods: {
        handleChange(file) {
            let suffixes = this.suffixes.toLowerCase();
            let fileName = file.name;
            let fileSize = file.size;
            let idx = fileName.lastIndexOf(".");
            let ext = "";
            if (idx !== -1) {
                ext = fileName.substr(idx + 1).toLowerCase();
            }
            if (suffixes != "*") {
                if (suffixes.indexOf(ext) < 0) {
                    this.$message.error('选择文件类型不对，请选择' + suffixes + '的文件！');
                    return;
                }
            }
            let temp = {fileName: fileName, fileSize: fileSize, suffix: ext, file: file.raw}
            this.dataList.push(temp);
        },
        submitFile() {
            if (this.dataList.length == 0) {
                this.$message.error('请选择要上传的文件');
                return;
            }
            if (this.fileCode == "") {
                this.$message.error('请填写固定文件编号');
                return;
            }
            let formData = new FormData();
            formData.append("fileCode", this.fileCode);
            formData.append("fileName", this.dataList[0].fileName);
            formData.append("files", this.dataList[0].file);
            
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/baseUploadFile/upload", formData).then(res => {
                this.resetForm(res.data);
            }).finally(() => {
                this.loading = false;
            });
            
        },
        deleteFile() {
            this.dataList = [];
        },
        resetForm(data) {
            this.dataList = [];
            this.$emit('change', data);
            this.$emit('update:visible', false);
        }
    }
}
</script>

<style lang="scss">

.upload-file-page {

    .upload-form {
        .upload-form-item {
            .upload-title {
                width: 100px;
                text-align: right;
                float: left;
                height: 40px;
                line-height: 40px;
                margin-bottom: 10px;
                font-size: 18px;
            }
            .upload-content {
                width: auto;
                float: left;
                height: 40px;
                line-height: 40px;
                margin-bottom: 10px;
                font-size: 18px;

                .show_file_div {
                    .show_file_name {
                        width: auto;
                        height: 40px;
                        line-height: 40px;
                        float: left;
                        font-size: 16px;
                        margin-left: 10px;
                        cursor: pointer;
                        color: #409EFF;
                    }

                    .el-icon-error {
                        color: red;
                        font-size: 16px;
                        padding: 7px;
                        margin: 0;
                        border: none;
                    }
                }
            }
            .upload-content-message{
                height: 30px;
                line-height: 30px;
                margin-bottom: 10px;
                font-size: 14px;
            }
        }

    }


    .edit_button {
        width: auto;
        float: right;

        .el-button{
            margin-left: 10px;
        }
    }
}

</style>